<template>
    <div>
<el-card>
    <el-form label-width="80px" :rules="rules" ref="ruleFormRef" :model="model" hide-required-asterisk>
            <el-form-item label="医务账号" prop="account">
                <el-input  v-model="model.account"  placeholder="请输入账号名/手机号/邮箱"/>
            </el-form-item>
            <el-form-item label="账号权限" prop="purview">
                <el-select  v-model="model.purview" placeholder="选择你的捍卫者">
        <el-option label="医生" value="医生" />
        <el-option label="护士" value="护士" />
        <el-option label="医务管理员" value="医务管理员" />
        <el-option label="实习助理" value="实习助理" />
        <el-option label="药房" value="药房" />
      </el-select>
                
            </el-form-item>
            <el-form-item label="医务密码" prop="password" placeholder="请输入密码">
                <el-input  v-model="model.password" />
            </el-form-item>
            <el-form-item label="确认密码" prop="verifypassword" placeholder="请确认密码">
                <el-input  v-model="model.verifypassword" />
            </el-form-item>
            <el-form-item label="医务姓名" prop="name" placeholder="请输入医务人员姓名">
                <el-input  v-model="model.name" />
            </el-form-item>
            <el-form-item label="性别" prop="sex" >
                <el-radio-group v-model="model.sex">
        <el-radio label="男" />
        <el-radio label="女" />
      </el-radio-group>
            </el-form-item>
            <el-form-item label="身份证号" prop="idcard" placeholder="请输入医务人员身份证号">
                <el-input  v-model="model.idcard" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone" placeholder="请输入手机号">
                <el-input  v-model="model.phone" />
            </el-form-item>
            <el-form-item label="上传照片">
              <img v-if="model.headurl" :src="model.headurl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon" @click="dialogVisible=true"><Plus /></el-icon>
              <AvatarCropper class="cropper" v-if="dialogVisible" :dialogVisible.sync="dialogVisible" @closeAvatarDialog="closeAvatarDialog"></AvatarCropper>
        </el-form-item>
            <el-form-item >
                <el-button @click="createUser(ruleFormRef)" type="primary">确认创建</el-button>
                <el-button type="info" @click='leaveTop'>返回上一级</el-button>
            </el-form-item>
        </el-form>
</el-card>
    </div>
</template>

<script setup lang="ts">
import { usersaddReq } from '@/api/user/login';
import {ElMessage} from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router'
import AvatarCropper from '@/components/cropper.vue'

const closeAvatarDialog=(data)=> {
  console.log(data);
        dialogVisible.value = false;
        model.headurl=data.headurl;
        model.head=data.header
      }

const router = useRouter()

const model = reactive({
    name: '',
    phone:'',
    purview:'',
    sex:'',
    account:'',
    password:'',
    idcard:'',
    headurl:'',
    id:1,
    head:'',
    verifypassword:''
})

const upModel=reactive({
    account:'',
    password:'',
    name:'',
    sex:'',
    idcard:'',
    purview:'',
    phone:'',
    head:''
})

const dialogVisible=ref(false)


//表单验证规则
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 3, max: 5, message: '三到五个字', trigger: 'blur' },
  ],
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 16, message: '三到十六个字', trigger: 'blur' },
  ],
  verifypassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { min: 3, max: 16, message: '三到十六个字', trigger: 'blur' },
  ],
  idcard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
  ],
  purview: [
    {
      required: true,
      message: '请选择权限',
      trigger: 'change',
    },
  ],
  sex: [
    {
      required: true,
      message: '请选择性别',
      trigger: 'change',
    },
  ],
})

const handleImgSuccess=(res)=>{
    console.log(res);
    model.headurl=res.header_url;
    model.head=res.header
}

//确认创建
const createUser=async (formEl: FormInstance | undefined)=>{
    if (!formEl) return
    console.log(1);
    await formEl.validate(async (valid, fields) => {
    if  (valid) {
        Object.keys(upModel).forEach(key=>{
        upModel[key]=model[key]
    })
    console.log(upModel);
    const res=await usersaddReq(upModel)
    ElMessage({
        message:res.data.msg,
        type:'success'
    })
    router.push('/acc')
    } else {
      console.log('数据不完整！')
    }
  })
    // console.log(model);
   

}

//返回上一级
const leaveTop=()=>{
    router.push('/acc')
}
</script>

<style scoped lang="scss">
:deep .el-input{
    width:350px ;
}
.avatar{
        width: 120px;
        border-radius: 10px;
    }
    
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
 :deep .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.cropper{
  width: 200px;
  height: 200px;
}
</style>